<script setup>
import { ref } from 'vue'
import UsersSave from './dialog/save'
import columns from '@/config/columns/users'
import ConfirmButton from '@/components/plug-in/confirm-button'

let tablePros = ref()
let saveForm = ref({})
let saveShow = ref(false)

const saveDataShow = (record) => {
  saveForm.value = record
  saveShow.value = true
}
const reload = () => {
  tablePros.value.reload()
}

</script>

<template>
  <div class="wrapper">
    <users-save :form="saveForm" v-model:visible="saveShow" @complete="reload"/>

    <table-pro url="/users" ref="tablePros" rowKey="UserID" :columns="columns">
      <template v-slot:search>
        <icon-btn @click="saveDataShow(false)"></icon-btn>
      </template>
      <template v-slot="{ column, record}">
        <template v-if="column.dataIndex === 'RoleList'">
          <a-tag color="blue" v-if="Number(record.IsSuper) === 1">全部权限</a-tag>
          <template v-else>
            <a-tag color="blue" v-for="(item, index) in record.RoleList" :key="index">
              {{ item.RoleName }}
            </a-tag>
          </template>
        </template>
        <template v-if="column.dataIndex === 'Action'">
          <link-btn title="编辑" @click="saveDataShow(record)"></link-btn>
          <confirm-button
              :status="Number(record.UserStatus)"
              :params="{ID: record.UserID}"
              request-path="/users/status"
              @request-success="reload()"/>
        </template>
      </template>
    </table-pro>
  </div>
</template>
